import type { SetStateAction } from 'react';
import { useState, useEffect } from 'react';
import QRCode from 'qrcode';
import { Image } from 'antd';

function QrCodeGenerator(props: { channelId: any }) {
  const [qrCodeDataUri, setQrCodeDataUri] = useState('');
  const { channelId } = props;

  useEffect(() => {
    if (channelId) {
      QRCode.toDataURL(
        `https://offroad.parking.movebroad.com/wxapp/paying?channelId=${channelId}`,
        function (err, dataUri) {
          if (err) {
            console.error(err);
            return;
          }
          setQrCodeDataUri(dataUri);
        },
      );
    }
  }, [channelId]);

  return (
    <>
      <Image src={qrCodeDataUri} width={50} height={50} />
    </>
  );
}

export default QrCodeGenerator;
